<template>
  <div class="right_top">
    <div class="top">样本点数据分析</div>
    <div style="display:flex;">
      <div class="numBox">
        <p class="num">2</p>
        <p class="num">2</p>
        <p class="num">2</p>
        <p class="num">7</p>
        <p class="num">2</p>
        <p class="num">2</p>
        <p class="num">2</p>
        <p class="textPep">人</p>
      </div>
    </div>
    <div class="box">
      <div class="smBox">
        <img src="../assets/blur.png" class="img">
        <div class="smBox_right">
          <p class="title_text">近视学生</p>
          <p class="title_num">212,582<span>人</span></p>
        </div>
      </div>
      <div class="smBox">
        <img src="../assets/hs.png" class="img">
        <div class="smBox_right">
          <p class="title_text">裸眼视力异常</p>
          <p class="title_num">212,582<span>人</span></p>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="smBox">
        <img src="../assets/si.png" class="img">
        <div class="smBox_right">
          <p class="title_text">屈光视力异常</p>
          <p class="title_num">212,582<span>人</span></p>
        </div>
      </div>
      <div class="smBox">
        <img src="../assets/wu.png" class="img">
        <div class="smBox_right">
          <p class="title_text">近视临界人群</p>
          <p class="title_num">212,582<span>人</span></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "right_top",
  data() {
    return {};
  }
};
</script>
<style scoped>
.right_top {
  width: 100%;
  height: 370px;
}
.top {
  width: 100%;
  height: 44px;
  background: url("../assets/right_line.png") no-repeat;
  background-size: 100% 100%;
  color: #5bb3fb;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 44px;
}
.numBox {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.num {
  width: 30px;
  height: 43px;
  background: linear-gradient(to bottom, #38629e, #133f87);
  font-size: 24px;
  text-align: center;
  line-height: 43px;
  margin-right: 10px;
  color: #ffffff;
  font-weight: 600;
}
.textPep{
  font-size: 12px;
  padding-top: 20px;
  color: #ffffff;
}
.box{
  display: flex;
  justify-content: space-between;
}
.smBox{
  width: 260px;
  height: 120px;
  background: url('../assets/ju.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  display: flex;
}
.img{
  width: 70px;
  height: 70px;
  margin-top: 25px;
  margin-left: 20px;
  margin-right: 10px;
}
.smBox_right{
  width: 100%;
  height:120px;
  text-align: right;
}
.title_text{
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  padding-top: 20px;
  padding-right: 30px;
  margin-bottom: 15px;
}
.title_num{
  font-size: 26px;
  color: #5eb9ff;
}
.title_num span{
  color: #ffffff;
  font-size: 14px;
  margin-left: 5px;
  padding-right: 20px;
}
</style>